<template>
  <div class="result-container">
    <el-card header="检测结果">
      <div class="result-content">
        <!-- 图片展示 -->
        <div class="result-image">
          <img :src="`http://localhost:5000${imageUrl}`" alt="检测的植物图片" />
        </div>

        <!-- 结果信息 -->
        <div class="result-info">
          <p><strong>病害名称：</strong>{{ diseaseName }}</p>
          <p><strong>置信度：</strong>{{ confidence }}%</p>
          <el-progress
              :percentage="confidence"
              stroke-width="6"
              class="confidence-progress"
          ></el-progress>
          <el-button
              type="primary"
              class="back-btn"
              @click="$router.push('/detect/upload')"
          >
            重新检测
          </el-button>
        </div>
      </div>
    </el-card>

    <!-- 历史记录 -->
    <el-card header="检测历史" class="history-card">
      <el-table :data="historyList" border>
        <el-table-column prop="diseaseName" label="病害名称"></el-table-column>
        <el-table-column prop="confidence" label="置信度(%)"></el-table-column>
        <el-table-column prop="createdAt" label="检测时间">
          <template #default="scope">
            {{ formatTime(scope.row.createdAt) }}
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import request from '@/utils/request';

// 获取路由参数（检测结果）
const route = useRoute();
const diseaseName = ref(route.query.disease || '');
const confidence = ref(route.query.confidence || 0);
const imageUrl = ref(route.query.imageUrl || '');
const historyList = ref([]);

// 格式化时间
const formatTime = (timeStr) => {
  const date = new Date(timeStr);
  return date.toLocaleString();
};

// 获取检测历史
const getHistory = async () => {
  try {
    const res = await request.get('/detection/history');
    if (res.code === 200) {
      historyList.value = res.data;
    }
  } catch (error) {
    console.error('获取历史记录失败：', error);
  }
};

// 页面加载时获取历史记录
onMounted(() => {
  getHistory();
});
</script>

<style scoped>
/* 样式略 */
</style>